{% extends "user/user_base.html" %}

{% block primary %}

<div class="primary">

  {% comment %}
  <div class="item c_user_stats hide">
    <h2 class="heading">统计</h2>
    <div>
      <div id="figure-a" class="figure lg">
        <a href="/{{gsuser.username}}/-/stats/"><canvas id="id_month_container" width="700" height="250"></canvas></a>
      </div>
    </div>
  </div>
  {% endcomment %}

  <ul class="nav nav-tabs" id="repoTab">
    <li><a href="#repos" data-toggle="tab">仓库</a></li>
    <li><a href="#watchedRepos" data-toggle="tab">关注仓库</a></li>
    <li><a href="#followed" data-toggle="tab">关注用户</a></li>
    <li><a href="#follower" data-toggle="tab">粉丝</a></li>
  </ul>

  <div class="tab-content">
    <section class="item tab-pane active" id="repos">
      {% if repos|length > 0 %}
      <ul class="repo-list">
        {% for repo in repos %}
        <li class="repo">
          <ul class="meta">
            <li><a href="#"><span class="count">{{repo.commit}}</span><span class="meta-type">提交</span></a></li>
            <li><a href="#"><span class="count">{{repo.fork}}</span><span class="meta-type">派生</span></a></li>
            <li><a href="#"><span class="count">{{repo.watch}}</span><span class="meta-type">关注</span></a></li>
          </ul>
          <figure class="repo-avatar">
            <img src="/static/img/repo-avatar48.png" alt="{{repo.name}}">
            {% if repo.is_public %}
            <span class="private"><i class="icon-unlock"></i></span>
            {% else %}
            <span class="private"><i class="icon-lock"></i></span>
            {% endif %}
          </figure>
          <div class="summary">
            <div class="heading">
              <h3>
                  <a href="/{{gsuser.username}}/{{repo.name}}/">{{repo.name}}</a>
                  <span class="meta"><time class="unixtime" pubdate="pubdate">{{repo.modify_time|date:"U"}}</time>更新过</span>
              </h3>
            </div>

            <div class="detail">
              <p class="desc" title="{{repo.desc}}">{{repo.desc|truncatechars:"80"}}</p>
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
      {% else %}
        <p class="alert alert-info">没有可见仓库</p>
      {%endif%}
    </section>

    <section class="item tab-pane" id="watchedRepos">
      {% if watch_repos|length > 0 %}
      <ul class="repo-list">
        {% for watch_repo in watch_repos %}
        <li class="repo">
          <ul class="meta">
            <li><a href="#"><span class="count">{{repo.commit}}</span><span class="meta-type">提交</span></a></li>
            <li><a href="#"><span class="count">{{repo.fork}}</span><span class="meta-type">派生</span></a></li>
            <li><a href="#"><span class="count">{{repo.watch}}</span><span class="meta-type">关注</span></a></li>
          </ul>
          <figure class="repo-avatar">
            <img src="/static/img/repo-avatar48.png" alt="{{repo.name}}">
            {% if watch_repo.is_public %}
            <span class="private"><i class="icon-unlock"></i></span>
            {% else %}
            <span class="private"><i class="icon-lock"></i></span>
            {% endif %}
          </figure>
          <div class="summary">
            <div class="heading">
              <h3>
                  <a href="/{{watch_repo.username}}/{{watch_repo.name}}/">{{watch_repo.name}}</a>
                  <span class="meta"><time class="unixtime" pubdate="pubdate">{{watch_repo.modify_time}}</time>更新过</span>
              </h3>
            </div>

            <div class="detail">
              <p class="desc" title="{{watch_repo.desc}}">{{watch_repo.desc|truncatechars:"80"}}</p>
            </div>
          </div>

        </li>
        {% endfor %}
      </ul>
      {% else %}
        <p class="alert alert-info">没有可见仓库</p>
      {% endif %}
    </section>

    <section class="item tab-pane" id="followed">
      {% if watch_users %}
        {% for watch_user in watch_users %}
          <div class="user">
            <figure class="avatar">
              <img src="https://gravatar.com/avatar/{{watch_user.imgurl}}?s=65" alt="">
              <p class="name"><a href="/{{watch_user.username}}/" data-toggle="tooltip" title="{{watch_user.tweet}}">{{watch_user.username|truncatechars:"10"}}</a></p>
            </figure>
          </div>
        {% endfor %}
      {% else %}
        {% if user.username != gsuser.username %}
        <p class="alert alert-info">一个人都没关注。</p>
        {% else %}
        <p class="alert alert-info">还没有关注任何人。</p>
        {% endif %}
      {% endif %}

    </section>

    <section class="item tab-pane" id="follower">
      {% if bewatch_users %}
        {% for bewatch_user in bewatch_users %}
          <div class="user">
            <figure class="avatar">
              <img src="https://gravatar.com/avatar/{{bewatch_user.imgurl}}?s=65" alt="">
              <p class="name"><a href="/{{bewatch_user.username}}/" data-toggle="tooltip" title="{{bewatch_user.tweet}}">{{bewatch_user.username|truncatechars:"10"}}</a></p>
            </figure>
          </div>
        {% endfor %}
      {% else %}
        {% if user.username != gsuser.username %}
        <p class="alert alert-info">哎呀，这家伙真可怜还没有粉丝，<a href="#">成为他的第一个粉丝</a>，安慰他一下。</p>
        {% else %}
        <p class="alert alert-info">没有人粉我? <a href="#">导入Github上的项目</a>提升自己的活跃度</p>
        {% endif %}
      {% endif %}
    </section>

  </div>

</div>

{% endblock %}
{% block subjs %}
<script src="/static/js/min/highcharts.min.js?timestamp={{gitshell.timestamp}}"></script>
<script src="/static/js/min/markdown.min.js?timestamp={{gitshell.timestamp}}"></script>
<script>
  $(function(){
    $(".user-span").popover({ animation: false, placement: "bottom" });
    $("#repoTab a:first").tab("show");
  });
</script>
<script>
  $(function(){
    moment.lang('zh-cn');
    {% if gsuserprofile.resume %}
    var resume_md_converter = function() {
      var converter = new Markdown.getSanitizingConverter();
      var html = converter.makeHtml($('#userResumeContent').html());
      $('#userResumeContent').html(html);
      $('#userResumeContent').css("padding", "0 10px").show();
    };
    resume_md_converter();
    {% endif %}

    var last30days = {{last30days}};
    var last30daysAsCat = [];
    for(x in last30days) {
      last30daysAsCat.push(new Date(last30days[x]*1000).getDate());
    }
    last30daysAsCat.reverse()
      var last30days_commit = {{last30days_commit}};
    var last30daysAsData = [];
    for(x in last30days) {
      if(last30days[x] in last30days_commit) {
        last30daysAsData.push(last30days_commit[last30days[x]]);
        continue;
      }
      last30daysAsData.push(0);
    }
    last30daysAsData.reverse();

    function get_max(chart_data) {
      var max = 0;
      for(x in chart_data) {
        if(chart_data[x] > max) {
          max = chart_data[x];
        }
      }
      return max;
    }
    function get_steps(max) {
      var steps = 3;
      if(max > steps) {
        steps = 10;
      }
      return steps;
    }
    if(Object.keys(last30days_commit).length > 0) {
      $('.c_user_stats').show();
      var max = get_max(last30daysAsData);
      var steps = get_steps(max);
      var lineChartData = {
        labels : last30daysAsCat,
        datasets : [
        {
          fillColor : "rgba(151,187,205,0.5)",
          strokeColor : "rgba(151,187,205,0.5)",
          pointColor : "rgba(151,187,205,0.5)",
          pointStrokeColor : "#fff",
          data : last30daysAsData
        }
        ]
      };
      var ctx = document.getElementById("id_month_container").getContext("2d");
      new Chart(ctx).Line(lineChartData, {scaleShowLabels : true, scaleOverride: true, scaleSteps: steps, scaleStepWidth: Math.ceil(max / steps), scaleStartValue: 0, scaleFontColor : "#767C8D"});
    }

  });
</script>
{% endblock %}
